<!--
*@Author: QWP
*@Description: 外派详情信息
*@Date: 2024-10-10 10:37:02
-->
<template>
  <u-dialog
    title="外派备案信息"
    :hideBtns="['submit']"
    placement="right"
    v-bind="$attrs">
    <a-layout class="f-h-100">
      <caption class="f-font-center f-font-size24">公司非购买服务派遣人员备案表</caption>
      <table cellpadding="100" border="1"
        class="u-out-info-table">
        <tbody>
          <tr v-for="row in userInfo">
            <td v-for="col in row" v-bind="col">
              <span v-bind="col['spanProps'] || {}">{{ col.label || '' }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </a-layout>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'

const userInfo = [
  [
    {label: '派遣事由', key: '', style: { width: '80px' }},
    {label: '', key: '',},
  ],
  [
    {label: '派遣人员姓名', key: '', class: 'justified-text',  colspan: 1, rowspan: 1},
    {label: '', key: '', colspan: 1, rowspan: 1},
  ],
  [
    {label: '派遣人员隶属部门', key: '', class: 'justified-text', colspan: 1, rowspan: 1},
    {label: '', key: '', colspan: 1, rowspan: 1},
  ],
  [
    {label: '派遣期限', key: '', colspan: 1, rowspan: 1},
    {label: '自 2024 年 10 月 1 日起，到  2024  年 10 月 30 日止，共计  1  月  30  天。', key: '', colspan: 1, rowspan: 1},
  ],
  [
    {label: '任务安排单位', key: '', class: 'justified-text', colspan: 1, rowspan: 1},
    {label: '', key: '', colspan: 1, rowspan: 1},
  ],
  [
    {label: '拟派往单位', key: '', class: 'justified-text', colspan: 1, rowspan: 1},
    {label: '', key: '', colspan: 1, rowspan: 1},
  ],
  [
    {label: '派遣人员隶属部门意见', key: '', class: 'justified-text', colspan: 1, rowspan: 3},
    {label: '', key: '', colspan: 1, rowspan: 1, style: { height: '60px', 'border-bottom-color': 'transparent' }},
  ],
  [
    {label: '签字：', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      style: { 'border-bottom-color': 'transparent' },
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left'
        }
      }
    },
  ],
  [
    {label: '年月日', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left', 'letter-spacing': '30px'
        }
      }
    },
  ],

  [
    {label: '派遣人员隶属部门分管领导意见', key: '', class: 'justified-text', colspan: 1, rowspan: 3},
    {label: '', key: '', colspan: 1, rowspan: 1, style: { height: '60px', 'border-bottom-color': 'transparent' }},
  ],
  [
    {label: '签字：', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      style: { 'border-bottom-color': 'transparent' },
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left'
        }
      }
    },
  ],
  [
    {label: '年月日', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left', 'letter-spacing': '30px'
        }
      }
    },
  ],

  [
    {label: '人力资源部意见', key: '', class: 'justified-text', colspan: 1, rowspan: 3},
    {label: '', key: '', colspan: 1, rowspan: 1, style: { height: '60px', 'border-bottom-color': 'transparent' }},
  ],
  [
    {label: '签字：', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      style: { 'border-bottom-color': 'transparent' },
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left'
        }
      }
    },
  ],
  [
    {label: '年月日', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left', 'letter-spacing': '30px'
        }
      }
    },
  ],

  [
    {label: '人力资源部分管领导意见', key: '', class: 'justified-text', colspan: 1, rowspan: 3},
    {label: '', key: '', colspan: 1, rowspan: 1, style: { height: '60px', 'border-bottom-color': 'transparent' }},
  ],
  [
    {label: '签字：', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      style: { 'border-bottom-color': 'transparent' },
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left'
        }
      }
    },
  ],
  [
    {label: '年月日', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left', 'letter-spacing': '30px'
        }
      }
    },
  ],

  [
    {label: '公司主要领导意见', key: '', class: 'justified-text', colspan: 1, rowspan: 3},
    {label: '', key: '', colspan: 1, rowspan: 1, style: { height: '60px', 'border-bottom-color': 'transparent' }},
  ],
  [
    {label: '签字：', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      style: { 'border-bottom-color': 'transparent' },
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left'
        }
      }
    },
  ],
  [
    {label: '年月日', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left', 'letter-spacing': '30px'
        }
      }
    },
  ],
]

</script>

<style lang='scss' scoped>
.f-font-center {
  text-align: center
}
.f-font-right {
  text-align: right
}

.justified-text {
  text-align-last: justify;
}

.u-out-info-table {
  th, td {
    padding: 10px;
  }
}
</style>